<!DOCTYPE html>
<html>
  <head>
    <title>behaviour-attraction2</title>
    <meta
      name="viewport"
      id="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta charset="utf-8" />
    <style type="text/css">
      body {
        background-color: #333333;
        margin: 0px;
        overflow: hidden;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -khtml-user-select: none;
        user-select: none;
      }

      #canvas {
        background: #000;
      }
    </style>
  </head>

  <body>
    <canvas id="canvas"></canvas>
    <script src="../../lib/requestAnimationFrame.min.js"></script>
    <script src="../../lib/stats.min.js"></script>
    <script src="//localhost:3001/build/proton.js"></script>
    <script>
      var canvas;
      var context;
      var proton;
      var renderer;
      var emitter;
      var stats;
      var mouseObj;
      var _mousedown = false;
      var repulsionBehaviour, crossZoneBehaviour;

      main();

      function main() {
        canvas = document.getElementById("canvas");
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        context = canvas.getContext("2d");
        addStats();

        createProton();
        tick();

        canvas.addEventListener("mousedown", mousedownHandler, false);
        canvas.addEventListener("mouseup", mouseupHandler, false);
        canvas.addEventListener("mousemove", mousemoveHandler, false);

        window.onresize = function(e) {
          canvas.width = window.innerWidth;
          canvas.height = window.innerHeight;
          crossZoneBehaviour.reset(
            new Proton.RectZone(0, 0, canvas.width, canvas.height),
            "cross"
          );
        };
      }

      function addStats() {
        stats = new Stats();
        stats.setMode(2);
        stats.domElement.style.position = "absolute";
        stats.domElement.style.left = "0px";
        stats.domElement.style.top = "0px";
        document.body.appendChild(stats.domElement);
      }

      function createProton() {
        proton = new Proton();

        emitter = new Proton.Emitter();
        emitter.damping = 0.008;
        emitter.rate = new Proton.Rate(200);

        emitter.addInitialize(new Proton.Mass(1));
        emitter.addInitialize(new Proton.Radius(4));
        emitter.addInitialize(
          new Proton.Velocity(
            new Proton.Span(1.5),
            new Proton.Span(0, 360),
            "polar"
          )
        );

        mouseObj = {
          x: 1003 / 2,
          y: 610 / 2
        };
        repulsionBehaviour = new Proton.Repulsion(mouseObj, 0, 0);
        addrepulsionBehaviours();
        crossZoneBehaviour = new Proton.CrossZone(
          new Proton.RectZone(0, 0, canvas.width, canvas.height),
          "cross"
        );
        emitter.addBehaviour(new Proton.Color("random"));
        emitter.addBehaviour(repulsionBehaviour);
        emitter.addBehaviour(crossZoneBehaviour);

        emitter.p.x = canvas.width / 2;
        emitter.p.y = canvas.height / 2;
        emitter.emit("once");
        proton.addEmitter(emitter);
        proton.addRenderer(createRenderer());
      }

      function addrepulsionBehaviours() {
        var total = 12;
        var d = 360 / total;
        var R = 230;
        for (var i = 0; i < 360; i += d) {
          var x = R * Math.cos((i * Math.PI) / 180);
          var y = R * Math.sin((i * Math.PI) / 180);
          emitter.addBehaviour(
            new Proton.Attraction(
              {
                x: x + canvas.width / 2,
                y: y + canvas.height / 2
              },
              10,
              300
            )
          );
        }

        emitter.addBehaviour(
          new Proton.Repulsion(
            {
              x: canvas.width / 2,
              y: canvas.height / 2
            },
            20,
            300
          )
        );
      }

      function mousedownHandler(e) {
        _mousedown = true;
      }

      function mousemoveHandler(e) {
        if (_mousedown) {
          var _x, _y;
          if (e.layerX || e.layerX == 0) {
            _x = e.layerX;
            _y = e.layerY;
          } else if (e.offsetX || e.offsetX == 0) {
            _x = e.offsetX;
            _y = e.offsetY;
          }

          mouseObj.x = _x;
          mouseObj.y = _y;
          repulsionBehaviour.reset(mouseObj, 30, 500);
        }
      }

      function createRenderer() {
        var renderer = new Proton.CanvasRenderer(canvas);

        renderer.onProtonUpdate = function() {
          context.fillStyle = "rgba(0, 0, 0, 0.02)";
          context.fillRect(0, 0, canvas.width, canvas.height);
        };

        renderer.onParticleUpdate = function(particle) {
          context.beginPath();
          context.strokeStyle = particle.color;
          context.lineWidth = 1;
          context.moveTo(particle.old.p.x, particle.old.p.y);
          context.lineTo(particle.p.x, particle.p.y);
          context.closePath();
          context.stroke();
        };

        return renderer;
      }

      function mouseupHandler(e) {
        _mousedown = false;
        repulsionBehaviour.reset(mouseObj, 0, 0);
      }

      function tick() {
        requestAnimationFrame(tick);

        stats.begin();
        proton.update();
        stats.end();
      }
    </script>
  </body>
</html>
